<template>

    <div class="emb-txt-family">

        <figure @click="openDialog()">
            <img v-if="!value" src="@/assets/images/designer/designer-emb-font01.png" alt="">
            <img v-else
                 :src="'http://pod-product.oss-us-east-1.aliyuncs.com/static/emb-fonts-20240605/' + value + '.png'"
                 alt="">
        </figure>

        <UxDialog :visible="visible" @close="visible = false">

            <div class="emb-txt-box">

                <div class="emb-txt-sidebar">
                    <!-- <h3>Included in DG16</h3> -->
                    <ul>
                        <li v-for="(group, idx) in groups" :key="group.name" v-text="group.name"
                            :class="{ active: idx == index }" @click="index = idx"></li>
                    </ul>
                    <!-- <h3>Purchasable Font Packs</h3>
                    <ul>
                        <li>Artwork Font Pack</li>
                        <li>Blended Font Pack</li>
                        <li>Monogram Master Pack</li>
                    </ul> -->
                </div>
                <div class="emb-txt-body">
                    <ul>
                        <li v-for="font in groupActive" :key="font.name" @click="setFamily(font)">
                            <img :src="'http://pod-product.oss-us-east-1.aliyuncs.com/static/emb-fonts-20240605/' + font.name + '.png'"
                                 alt="">
                            <span v-text="font.name"></span>
                            <div>
                                <p>{{ `Min Size: ${getIn(font.min)} in` }}</p>
                                <p>{{ `Max Size: ${getIn(font.max)} in` }}</p>
                            </div>
                        </li>
                        <!-- <li @click="setFamily('Carving')">
                            <img src="@/assets/images/designer/designer-emb-font02.png" alt="">
                            <span>Carving</span>
                        </li>
                        <li @click="setFamily('Energy')">
                            <img src="@/assets/images/designer/designer-emb-font03.png" alt="">
                            <span>Energy</span>
                        </li>
                        <li @click="setFamily('Lasso')">
                            <img src="@/assets/images/designer/designer-emb-font04.png" alt="">
                            <span>Lasso</span>
                        </li>

                        <li @click="setFamily('Block New')">
                            <img src="@/assets/images/designer/designer-emb-font01.png" alt="">
                            <span>Block New</span>
                        </li>
                        <li @click="setFamily('Block New')">
                            <img src="@/assets/images/designer/designer-emb-font01.png" alt="">
                            <span>Block New</span>
                        </li> -->
                    </ul>
                </div>
            </div>

        </UxDialog>

    </div>

</template>

<script>
import { emb_fonts } from "@/utils/emb-fonts.js";
export default {
    props: {
        value: { type: String, default: '' },
        fontSize: { type: Number, default: 0 }
    },
    data () {
        return {
            visible: false,
            index: 0,
        };
    },

    computed: {
        groups () {

            const names = Array.from(new Set(emb_fonts.map(i => i.group)))
            const group = names.map(i => {
                return { name: i, fonts: emb_fonts.filter(f => f.group == i) }
            })
            return group
        },
        groupActive () {
            const group = this.groups[this.index] || {}
            return group.fonts || []
        }
    },
    methods: {
        getIn (val) {
            return Math.round(100 * val * 1 * 0.0394) / 100
        },
        openDialog () {
            this.visible = true
        },
        setFamily (font) {

            const min = Math.round(100 * font.min * 10) / 100;
            const max = Math.round(100 * font.max * 10) / 100;

            this.$emit('input', font.name)
            this.$emit('update:font-size', Math.max(min, Math.min(max, this.fontSize)))
            this.visible = false;
        }
    },

    created () {
    },
};
</script>

<style lang="scss" scoped>
.emb-txt-family {
    &>figure {
        display: flex;
        align-items: center;
        width: 380px;
        height: 56px;
        background: #ffffff;
        border-radius: 8px;
        border: 1px solid #e6e6e6;
        box-sizing: border-box;
        padding: 6px 12px;
        overflow: hidden;

        cursor: pointer;

        &:hover {
            border-color: #C7C7C7;
        }

        img {
            height: 28px;
        }
    }
}

.emb-txt-box {
    width: 1072px;
    min-height: calc(100vh - 80px);
    position: relative;
    box-sizing: border-box;
    padding: 56px 20px 20px;
    display: flex;

    &::before {
        content: 'Select font';
        position: absolute;
        left: 24px;
        top: 20px;
        font-family: Roboto-Medium, Roboto;
        font-weight: 500;
        font-size: 22px;
        color: #000000;
        line-height: 26px;
    }

    .emb-txt-sidebar {
        margin-right: 16px;

        h3 {
            font-family: Roboto-Medium, Roboto;
            font-weight: 500;
            font-size: 14px;
            color: #000000;
            line-height: 32px;
            padding: 0 4px;
        }

        ul {
            li {
                height: 32px;
                border-radius: 8px;
                margin-top: 2px;
                font-family: Roboto, Roboto;
                font-weight: 400;
                font-size: 14px;
                color: #555555;
                line-height: 32px;
                padding: 0 8px;
                cursor: pointer;

                &:hover {
                    background: #f6f6f6;
                    color: #292929;
                }

                &.active {
                    color: #000000;
                    background: #F2F2F2;
                    border-radius: 8px;
                }
            }
        }
    }

    .emb-txt-body {
        flex: 1;

        ul {
            display: flex;
            flex-wrap: wrap;

            li {
                width: calc(33.3% - 10px);
                margin: 5px;
                padding: 8px;
                height: 82px;
                box-sizing: border-box;
                border-radius: 8px;
                display: flex;
                align-items: flex-start;
                flex-direction: column;
                overflow: hidden;
                cursor: pointer;
                border: 1px solid transparent;

                img {
                    max-height: 28px;
                    width: auto;
                }

                span {
                    margin-top: 8px;
                    font-family: Roboto-Medium, Roboto;
                    font-weight: 500;
                    font-size: 12px;
                    color: #292929;
                    line-height: 14px;
                }

                div {
                    display: flex;
                    flex-direction: row;
                    align-items: flex-start;
                    margin-top: 4px;

                    p {
                        font-family: Roboto, Roboto;
                        font-weight: 400;
                        font-size: 12px;
                        color: #555555;
                        line-height: 14px;

                        &:first-child {
                            margin-right: 10px;
                        }
                    }
                }

                &:hover {
                    background: #FFFFFF;
                    box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.14);
                    border: 1px solid #E6E6E6;
                }
            }
        }
    }
}
</style>
